<template>
	<view class="pro-body">
	
		<view class="body" >
			<view class="top-container">
				<uni-list :border="false" >
					<uni-list-item :border="false" title="单据编号"  :rightText="header.billNo" />
					<!-- <uni-list-item :border="false" title="物料编码"  :rightText="header.materialNo" />
					<uni-list-item :border="false" title="件号"  :rightText="header.specification" />
					<uni-list-item :border="false" title="应收数量"  :rightText="header.mustQty" />
					<uni-list-item :border="false" title="单位"  :rightText="header.unitName" /> -->
			
				</uni-list>
			</view>
			<template >
			
					   
					<view class="panel">
						
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">物料编码：</view>
									<view class="panel_content_row_item_value">{{ header.materialNo }}</view>
								</view>
							</view>
						</view>
								
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">名称：</view>
									<view class="panel_content_row_item_value">{{ header.materialName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">规格：</view>
									<view class="panel_content_row_item_value">{{ header.specification }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">单位：</view>
									<view class="panel_content_row_item_value">{{ header.unitName }}</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">应收数量：</view>
									<view class="panel_content_row_item_value">{{ header.mustQty }}</view>
								</view>
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">实收数量：</view>
									<view class="panel_content_row_item_value">
										<view class="panel_content_row_item_value_input">
											<input style="width: 40px" v-model="header.realQty"
											placeholder="实收数量"
											placeholder-class="input_placeholder"
											@input="handleQuality(header)"/>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">批号：</view>
									<view class="panel_content_row_item_value_input">
										<input  v-model="header.flot " placeholder="请输入批号"
										placeholder-class="input_placeholder"
										style="width: 150px;"
										/>
									</view>
								</view>
								
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item">
									<view class="panel_content_row_item_title">入库仓库：</view>
									<view class="sechoice">
										<uni-data-select v-model="header.stockNo" :localdata="header.stockList"
										 @change="change(header.stockNo,header)"   
										placeholder="请选择仓库"></uni-data-select>
									</view>
								</view>
								
							</view>
						</view>
						<view class="panel_content">
							<view class="panel_content_row">
								<view class="panel_content_row_item" v-if="header.isLocation">
									<view class="panel_content_row_item_title">入库仓位：</view>
									<view class="panel_content_row_item_value">
										<input v-model="header.locationNo " placeholder="请输入仓位"
										placeholder-class="input_placeholder"
										style="width: 150px;"
										/>
									</view>

								</view>
							</view>
						</view>
						
						<view class="flex-list-btn" >
							<view  class="flex-list-btn-item" v-if="header.isLocation"
								@click="scanOrderDe(header)">
								扫描仓位
							</view>
						</view>
				
				
				</view>

			</template>
			<view class="footerPanelgx">
				<view class="footerPanelgx_body">
					<button @click="auditPurIn()" class="footerBtngx save" :disabled="butClick"><i
							class="iconfont icon-duihao btn_icon" ></i>审核
					</button>
					
				</view>
			</view>
		</view>	
		<tray-popup ref="trayPopupRef" @success="trayScanningScuess"></tray-popup>
</view>
</template>

<script>
	import uniTransition from 'uni_modules/uni-transition/components/uni-transition/uni-transition.vue';
	import trayPopup from '../../components/popup/trayPopup.vue'
	import {getPurInDetail,
	checkStock,
	auditPurIn,
	getLocation
	} from '@/utils/api.js'

	export default {
		components: {
			trayPopup
		},
		data(){
			return{
				detailId: '',
				loading: true,
				header:{},
				detail:[],
				// isLocation:false,
				materialList : [],
				butClick : false,
				selectRange : [],
			}
	},
	methods:{
		//扫码成功后返回
		trayScanningScuess(e){
			if (!this.header.locationList.includes(e)){
				uni.showToast({
					title:'仓位错误请重试',
					icon:'error'
				})
				return;
			}
			
			  //this.currentItem.locationNo = e;
		const index = this.header.findIndex(i => i.id === this.currentItem.id)
		  if (index !== -1) {
		    this.header.splice(index, 1, { ...this.currentItem, locationNo: e })
		  }
			
		},
		//填写合格数量
		handleQuality(e){
			if (e.realQty <= e.unReceiveQty ){
				const v = e.realQty
				const zero = "(/^\D*(\d*(?:\.\d{0,2})?).*$/g,'$1')"
				let final = 0
				if (!v) {
				  final = 0
				} else {
				  final = v.toString().replace(zero, (v) => {
					return 0
				  })
						
				  if (final.split('')[0] * 1 === 0) {
					final = final.slice(1) - 0 || 0
				  }
				}
				this.$nextTick(() => {
				 e.realQty = final.toString() || '0'
				})
				
			} else{
				uni.showToast({
					title:'实收数量不能大于剩余未收数量',
					icon:'none'
				})
				e.realQty = 0
			}
			
		},
		//扫描仓位，扫描成功后修改下拉框中仓位信息
		scanOrderDe(item) {
				this.$refs.trayPopupRef.open()
			// let _this = this
			// qing.call('scanQRCode', {
			//  'needResult': 1, //是否需要处理，默认为0，扫描结果由云之家处理，1则直接返回扫描结果
			//  'isShowAlbum': false, //是否显示相册
			// 	success: function(res) {
			// 		if (!item.locationList.includes(res.data.qrcode_str)){
			// 			uni.showToast({
			// 				title:'仓位错误请重试',
			// 				icon:'error'
			// 			})
			// 			return;
			// 		}
			// 		item.locationNo = res.data.qrcode_str
			// 	},
			// 	error: function(e) {
			// 		console.log(e)
			//  }
				
			// })
		},
		
		//修改仓库后重新校验仓库有没有启用仓位
		change(e,item){
			for(let i =0;i < item.stockList.length;i++){
				if (item.stockList[i].value == e){
					item.stockName = item.stockList[i].text
				}
			}

			this.checkStock(e,item)
			//将仓位赋值为空
		
		},
		//检查当前仓库是否启用仓位
		checkStock(stockNo,item){
			checkStock({stockNo : stockNo}).then(res =>{
				item.isLocation = res.data.data
				//如果仓库启用仓位的话查询仓位信息
				if (item.isLocation){
					this.getLocation(stockNo,item)
				}
			})
		},
		//获取仓位信息
		getLocation(stockNo,item){
			getLocation({stockNo:stockNo}).then(res =>{
				item.locationList = res.data.data
			})
		},
		//审核采购入库单
		auditPurIn(){
			let self = this;
			if(this.header.realQty === 0){
				uni.showToast({
					icon:'error',
					title:'实收数量不能为0'
				})
				return;
			}
			uni.showModal({
				title:'提示',
				content:'确认审核',
				success(res) {
					if (res.confirm){
					
						//没启用的话可以直接审核
						auditPurIn({header : self.header}).then(result => {
						if (result.data.data){
							uni.showToast({
								title:'审核成功',
								icon:'none'
							})
						}
						
						setTimeout(() =>{
							uni.navigateBack({
								delta:1,
								success() {
									uni.$emit('update',{msg:'页面刷新'});
								}
							})
						},1000)
						})
					
					}
				}
			})
		},
		
		// 获取详情数据
		initData(){
			getPurInDetail({detailId :this.detailId }).then(res => {
				this.header = res.data.data.data
				// this.detail = res.data.data.dataList
				// this.checkStock()
			
			})
		
		
		}
	},
	onLoad(e){
		this.detailId = e.detailId
		// 获取详情数据
		this.initData()
		
	},
	mounted() {
		//引入云之家js
		const script = document.createElement('script');
		script.type = 'text/javascript';
		script.src = 'https://static.yunzhijia.com/public/js/qing/latest/qing.js';
		script.async = true; //异步加载
		document.body.appendChild(script)
		script.onload = () => {
			// console.log('successfully')
		}
		
	}
}
</script>

<style lang="scss" scoped>
	@import "../../static/css/common";
	/* 调整列表项左右文字大小 */
	::v-deep .uni-list-item__content-title {
	    font-size: 20px !important;  /* 左侧标题字体大小 */
		padding-left: 5px;
	}
	::v-deep .uni-list-item__extra-text {
	    font-size: 20px !important;  /* 右侧内容字体大小 */
		padding-right: 5px;
		 color: #333;
	}
	/* 调整行间距 */
	::v-deep .uni-list-item__container {
	    padding: 3px 0 !important;   /* 减小上下内边距 */
	    min-height: 10px !important; /* 减小最小高度 */
	}
	.panel {
	  background: #fbffe2;
	  border-radius: 16rpx;
	  // box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.1);
	}
/* 减小面板内容间距 */
.panel_content {
  // padding: 0 10px !important; // 移除上下内边距
  margin: 0 !important;       // 移除默认外边距
}
	/* 调整标题样式 */
	.panel_content_row_item_title {
		font-size: 17px !important;  /* 调大字体 */
		color: #000000 !important;   /* 纯黑字体 */
		flex-shrink: 0;             /* 防止压缩 */
	}
	/* 调整标题样式 */
	.panel_content_row_item_value {
	  flex: 1;
	  font-size: 17px !important; /* 数值特别放大 */
	  color: #333 !important;
	}
	/* 调整输入框容器 */
	.panel_content_row_item_value_input {
		height: 30px;
	    flex: 1;                    /* 占据剩余空间 */
	    margin-left: 10px;          /* 增加左右间距 */
	}
	.panel_content_row_item_value_input input {
	    height: 29px !important;    /* 调高输入框 */
	    font-size: 20px !important; /* 同步调大输入文字 */
	    // padding: 1px 12px !important;
	    // border: 1px solid #ddd;     /* 增加边框更清晰 */
	    border-radius: 4px;
	}
/* 调整扫描按钮区域 */
.flex-list-btn {
  margin-top: 5px !important;   // 减小上边距
  margin-bottom: 5px !important; // 减小下边距
}
	.pro-body{
		background-color: #ffffff;
	}
	.promenu-item {
	         display: flex;
	         align-items: center;
	         justify-content: center;
	         height: 40px;
			 font-size: 26px; /* 增大字体大小 */
			 // font-weight: bold; /* 加粗字体 */
			 border-bottom: 2px solid #c1c1c1; /* 添加水平分割线 */
	    }
		.container {
		    display: flex;
		    align-items: center; /* 垂直居中对齐 */
		    justify-content: space-between; /* 水平均匀分布 */
		}
	
	.sechoice {//调整下拉列表框
	    height: 40px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
		// background-color: #18BC37;
	}
	
	.btn-item{
		width: 70px;
		
		color: $primary;
		border: 1px solid $primary;
		align-items: center;
		justify-content: center;
		padding: 0 15px;
		border-radius: 4px;
	}
	// 底部按钮
	.footerPanelgx {
	  height: 90px;
	  background-color: #fbffe2;
	  .footerPanelgx_body {
	    display: flex;
	    // justify-content: center;
	    // gap: 20px;
	    padding: 10 20px;
	
	    .footerBtngx {
	      height: 55px;
	      margin: 0 5px;
	      display: flex;
	      line-height: 1;
	      font-size: 16px;
	      border-radius: 4px;
	      align-items: center;
	      justify-content: center;
	      box-shadow: 0 0 5px rgba(201, 201, 201, 0.5);
	      color: #fff;
	
	      &.save {
	        background-color: $uni-color-success;
	        width: 150px;
	        flex-shrink: 0;
	      }
	
	    }
	
	    .btn_icon {
	      margin-right: 8px;
	    }
	  }
	}
</style>